<template>
	<navigatorComp title="会员中心" bgcColor="none" fontColor="#fff">
		<!-- <template #rightWrap>
			<image
				@click="contactModel.show = true"
				src="http://112.124.50.179:8888/imgs/mine/member_service.png"
				mode=""
				class="service_img"
			></image>
		</template> -->
	</navigatorComp>

	<view class="member_bgc" :style="{ background: levelBgc[levelBgcIndex].bgc }"></view>
	<view class="member_content">
		<view
			class="member_card"
			:style="{
				background: levelBgc[levelBgcIndex].cardBgc,
				boxShadow: '8rpx 12rpx 16rpx 0rpx ' + levelBgc[levelBgcIndex].cardShadow
			}"
		>
			<image :src="levelBgc[levelBgcIndex].cardPic" mode="" class="member_level_img"></image>
			<view class="member_left_tip" :style="{ background: levelBgc[levelBgcIndex].color }">
				当前等级
			</view>
			<view class="member_title" :style="{ color: levelBgc[levelBgcIndex].color }">
				{{ levelBgc[levelBgcIndex].name }}
			</view>
			<view class="member_coin" @click="goUrl('/subPages/mine/memberCenter/coin_detail')">
				<image
					:src="levelBgc[levelBgcIndex].coinPic"
					mode=""
					class="member_coinPic"
				></image>
				<view
					class="member_coin_text display_flex"
					:style="{ color: levelBgc[levelBgcIndex].color }"
				>
					<text>可用积分:</text>
					<text style="font-size: 30rpx">{{ points }}</text>
				</view>
				<up-icon
					name="arrow-right"
					size="14"
					:color="levelBgc[levelBgcIndex].color"
				></up-icon>
			</view>
			<view
				class="member_developValue"
				:style="{ color: levelBgc[levelBgcIndex].color }"
				@click="goUrl('/subPages/mine/memberCenter/develop_detail')"
			>
				<text v-if="valueLimit > growthValue" style="font-weight: 500">
					{{ growthValue }}
				</text>
				<text v-if="valueLimit > growthValue" style="margin-right: 22rpx">
					/{{ valueLimit }}成长值
				</text>
				<text v-if="valueLimit > growthValue">
					{{
						levelBgcIndex < 2
							? '还需' + (valueLimit - growthValue) + '即可升级'
							: '还差' + (valueLimit - growthValue) + '达到满级'
					}}
				</text>
				<text v-else>恭喜！您的成长值已达满额，感谢一路有您！</text>
				<up-icon
					name="arrow-right"
					size="14"
					:color="levelBgc[levelBgcIndex].color"
				></up-icon>
			</view>
			<view style="margin-top: 12rpx; margin-right: 32rpx">
				<up-line-progress
					:percentage="(growthValue / valueLimit) * 100"
					inactiveColor="rgba(255, 255, 255, 0.60)"
					:activeColor="levelBgc[levelBgcIndex].color"
					height="16rpx"
					:showText="false"
				></up-line-progress>
			</view>
		</view>

		<!-- 会员兑换 -->
		<view class="exchange_title">
			<image src="http://112.124.50.179:8888/imgs/mine/member_left.png" mode=""></image>
			<image src="http://112.124.50.179:8888/imgs/mine/member_title.png" mode=""></image>
			<image src="http://112.124.50.179:8888/imgs/mine/member_right.png" mode=""></image>
		</view>
		<!-- 瀑布流 -->
		<mescroll-uni
			:height="height + 'px'"
			:up="upOption"
			@init="mescrollInit"
			@down="myDownCallback"
			@up="upCallback"
			style="padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx)"
		>
			<up-waterfall v-model="flow.flowList" ref="uWaterfallRef" v-if="SHOW">
				<template v-slot:left="{ leftList }">
					<view class="goodItem" v-for="(item, index) in leftList" :key="index">
						<!-- {{leftList}} -->
						<up-lazy-load
							threshold="-450"
							border-radius="0"
							:image="item.goodsImageUrl"
							:index="index"
						></up-lazy-load>
						<view class="goodInfo">
							<view class="goodInfo_title singleLineOverflowHidden">
								{{ item.goodsTitle }}
							</view>
							<view class="goodInfo_coin">
								<text>{{ item.nowNeedIntegralQuantity }}</text>
								<text>积分</text>
								<text>¥{{ item.price }}</text>
							</view>
							<view class="goodInfo_buy">
								<view class="goodInfo_buy_left">
									<view>已兑{{ item.alreadyRedeemed }}</view>
									<view>
										{{
											item.goodsTotal - item.alreadyRedeemed > 99
												? '剩余数量99+'
												: '剩余数量' +
												  (item.goodsTotal - item.alreadyRedeemed)
										}}
									</view>
								</view>
								<view
									:class="[
										'goodInfo_buy_btn',
										item.goodsTotal - item.alreadyRedeemed <= 0 ||
										points < item.nowNeedIntegralQuantity ||
										item.state !== 0
											? 'goodInfo_buy_btn_inActive'
											: ''
									]"
									:style="{ fontSize: item.state !== 0 ? '22rpx' : '24rpx' }"
									@click="showModel(item)"
								>
									{{
										item.goodsTotal - item.alreadyRedeemed <= 0
											? '库存不足'
											: points < item.nowNeedIntegralQuantity
											? '积分不足'
											: item.state !== 0
											? '已达兑换上限'
											: '立即兑换'
									}}
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{ rightList }">
					<view
						class="goodItem"
						style="margin-right: 0"
						v-for="(item, index) in rightList"
						:key="index"
					>
						<up-lazy-load
							threshold="-450"
							border-radius="0"
							:image="item.goodsImageUrl"
							:index="index"
						></up-lazy-load>
						<view class="goodInfo">
							<view class="goodInfo_title singleLineOverflowHidden">
								{{ item.goodsTitle }}
							</view>
							<view class="goodInfo_coin">
								<text>{{ item.nowNeedIntegralQuantity }}</text>
								<text>积分</text>
								<text>¥{{ item.price }}</text>
							</view>
							<view class="goodInfo_buy">
								<view class="goodInfo_buy_left">
									<view>已兑{{ item.alreadyRedeemed }}</view>
									<view>
										{{
											item.goodsTotal - item.alreadyRedeemed > 99
												? '剩余数量99+'
												: '剩余数量' +
												  (item.goodsTotal - item.alreadyRedeemed)
										}}
									</view>
								</view>
								<view
									:class="[
										'goodInfo_buy_btn',
										item.goodsTotal - item.alreadyRedeemed <= 0 ||
										points < item.nowNeedIntegralQuantity ||
										item.state !== 0
											? 'goodInfo_buy_btn_inActive'
											: ''
									]"
									:style="{ fontSize: item.state !== 0 ? '22rpx' : '24rpx' }"
									@click="showModel(item)"
								>
									{{
										item.goodsTotal - item.alreadyRedeemed <= 0
											? '库存不足'
											: points < item.nowNeedIntegralQuantity
											? '积分不足'
											: item.state !== 0
											? '已达兑换上限'
											: '立即兑换'
									}}
								</view>
							</view>
						</view>
					</view>
				</template>
			</up-waterfall>
		</mescroll-uni>
	</view>

	<!-- 积分兑换弹框 -->
	<up-modal
		:show="points_exchangePopup.show"
		width="622rpx"
		:showConfirmButton="false"
		class="points_exchange_modal_box"
	>
		<view class="points_exchange_modal">
			<view class="points_exchange_close">
				<u-icon
					name="close"
					color="#666666"
					size="23"
					@click="points_exchangePopup.show = false"
				></u-icon>
			</view>
			<view class="points_exchange_good">
				<image :src="currentGood.goodsImageUrl" mode=""></image>
				<view class="points_exchange_good_text">
					<view class="good_name singleLineOverflowHidden">
						{{ currentGood.goodsTitle }}
					</view>
					<view class="good_coin">
						<text>{{ currentGood.nowNeedIntegralQuantity }}</text>
						<text style="font-size: 24rpx; margin-left: 8rpx">积分</text>
					</view>
				</view>
			</view>
			<!-- 如果是实体 -->
			<view style="margin-top: 40rpx; margin-bottom: -32rpx">
				<u-form
					v-if="currentGood.goodsType == 2"
					label-width="100"
					label-style="font-size:28rpx;color:#333333"
					:model="points_exchangePopup.formData"
					ref="uForm"
				>
					<u-form-item label="姓名:" prop="name" required>
						<u-input
							v-model.trim="points_exchangePopup.formData.name"
							border="none"
							placeholder="请输入"
							clearable
							inputAlign="right"
							fontSize="28rpx"
							color="#333333"
						/>
					</u-form-item>
					<u-form-item label="手机号:" prop="phone" required>
						<u-input
							v-model.trim="points_exchangePopup.formData.phoneNumber"
							border="none"
							placeholder="请输入"
							maxlength="11"
							type="number"
							clearable
							inputAlign="right"
							fontSize="28rpx"
							color="#333333"
						/>
					</u-form-item>
					<u-form-item label="区域:" prop="region" required>
						<pickerAddress @change="changeAddress">
							<view class="display_flex">
								<view
									:class="[
										'placeHolder',
										points_exchangePopup.formData.region && 'value'
									]"
								>
									{{ points_exchangePopup.formData.region || '请选择' }}
								</view>
								<image
									class="arrow_right"
									src="http://112.124.50.179:8888/imgs/home/arrow_right.png"
									mode=""
								></image>
							</view>
						</pickerAddress>
					</u-form-item>
					<u-form-item label="详细地址:" prop="detailedAddress" required>
						<u-input
							v-model.trim="points_exchangePopup.formData.detailedAddress"
							border="none"
							placeholder="请输入"
							clearable
							inputAlign="right"
							fontSize="28rpx"
							color="#333333"
						/>
					</u-form-item>
				</u-form>
			</view>

			<view class="exchange_btn display_flex">
				<myButton
					bgcColor="#F3E0BB"
					name="立即兑换"
					width="400rpx"
					@clickBtn="exchange"
				></myButton>
			</view>
			<view class="exchange_attention">
				<image
					src="http://112.124.50.179:8888/imgs/mine/exchange_attention.png"
					mode=""
				></image>
				<view class="exchange_attention_text">
					<text>积分兑换后无法取消或撤回</text>
					<text v-if="currentGood.goodsType == 2">
						，商品发货信息将由系统消息进行通知
					</text>
				</view>
			</view>
		</view>
	</up-modal>

	<!-- 客服 -->
	<customerService :qrcodeUrl="qrcodeUrl"></customerService>
</template>

<script setup>
import { random, guid } from '@/node_modules/uview-plus';
import { onLoad, onReachBottom, onReady } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import navigatorComp from '/components/navigator/index.vue';
import pickerAddress from '/components/picker/addressPicker.vue';
import myButton from '/components/button/index.vue';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import customerService from '/components/customerService/index.vue';
import store from '@/store/index.js';
import MineApi from '@/API/mine';
import CommonApi from '@/API/commenApi';
const mineApi = new MineApi();
const commonApi = new CommonApi();
//微信小程序上支持类型穿透
defineOptions({
	options: {
		styleIsolation: 'shared'
	}
});

const level = ref(1); //会员等级
const levelBgcIndex = ref(1); //三种背景
const points = ref(0); //积分
const growthValue = ref(0); //成长值
const valueLimit = ref(1); //成长值上限
const levelBgc = ref([
	{
		name: '普通会员',
		bgc: 'linear-gradient(102deg, #4a6283 0%, #2a3849 100%)',
		cardBgc: 'linear-gradient(140deg, #fcfcfe 0%, #ABBCD5 50%, #ABBCD5 70%,#E0F2FD 100%)',
		cardShadow: 'rgba(64, 73, 102, 0.10)',
		cardPic: 'http://112.124.50.179:8888/imgs/mine/level1.png',
		coinPic: 'http://112.124.50.179:8888/imgs/mine/coin1.png',
		color: '#5C7099'
	},
	{
		name: '钻石会员',
		bgc: 'linear-gradient(104deg, #5D4930 0%, #3D342A 100%)',
		cardBgc: 'linear-gradient(164deg, #fcfcfe 0%, #FFE2AF 100%)',
		cardShadow: 'rgba(255, 160, 56, 0.10)',
		cardPic: 'http://112.124.50.179:8888/imgs/mine/level2.png',
		coinPic: 'http://112.124.50.179:8888/imgs/mine/coin2.png',
		color: '#7D5227'
	},
	{
		name: '至尊会员',
		bgc: 'linear-gradient(125deg, #3C3E67 0%, #303150 100%)',
		cardBgc: 'linear-gradient(164deg, #fcfcfe 0%, #c8cbfe 100%)',
		cardShadow: 'rgba(116, 68, 219, 0.1)',
		cardPic: 'http://112.124.50.179:8888/imgs/mine/level3.png',
		coinPic: 'http://112.124.50.179:8888/imgs/mine/coin3.png',
		color: '#33187F'
	}
]);

//瀑布流
const SHOW = ref(true);
const height = ref(0);
const { mescrollInit, downCallback, getMescroll } = useMescroll(); // 调用mescroll的hook
const upOption = {
	page: {
		size: 10 // 每页数据的数量
	},
	noMoreSize: 4 //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
	// empty: {
	// 	use: false //不显示空图
	// }
};
const lastId = ref(0); //最后一个元素的id
const flow = reactive({
	loadStatus: 'loadmore',
	flowList: [],
	list: []
});
const uWaterfallRef = ref();

//积分兑换弹框
const points_exchangePopup = reactive({
	show: false,
	formData: {}
});
const currentGood = ref({});

// 客服弹框
const contactModel = reactive({
	show: false
});
const qrcodeUrl = ref(); //客服二维码

onLoad(() => {
	// #ifdef MP-WEIXIN
	height.value =
		uni.getSystemInfoSync().windowHeight - getApp().globalData.navHeight - uni.upx2px(480);
	// #endif

	// #ifdef APP || H5
	height.value =
		uni.getSystemInfoSync().windowHeight -
		getApp().globalData.navHeight -
		uni.upx2px(88) -
		uni.upx2px(480);
	// #endif

	getCustomerUrl();

	getUserInfo();
});

/**
 * 获取个人信息
 */
const getUserInfo = async () => {
	if (!store.state.userInfo.userInfo.phoneNumber) {
		await store.dispatch('setUserInfo');
	}

	//会员等级
	levelBgcIndex.value = store.state.userInfo.userInfo.growthType - 1;
	//积分
	points.value = store.state.userInfo.userInfo.bonus;
	growthValue.value = store.state.userInfo.userInfo.growthValue;
	valueLimit.value = store.state.userInfo.userInfo.valueLimit;
};

/**
 * 获取客服二维码
 */
const getCustomerUrl = async () => {
	let res = await commonApi.getCustomerUrl({ from: 3 });
	if (res.code === 0) {
		qrcodeUrl.value = res.data.url;
	}
};

onReady(() => {
	addRandomData();
});
/**
 * 上拉加载
 */
const upCallback = (mescroll) => {
	mineApi
		.getExchangedItemsList({
			latestId: lastId.value
		})
		.then((res) => {
			const curPageData = res.data.exchangedItemsList || []; // 当前页数据
			if (lastId.value == 0) flow.flowList = []; //如果是第一页需手动制空列表
			flow.flowList = flow.flowList.concat(curPageData); //追加新数据
			if (curPageData.length > 0) {
				lastId.value = curPageData[curPageData.length - 1].exchangedItemsId;
			}
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		})
		.catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		});
	addRandomData();
	// mescroll.endErr();
};

const myDownCallback = (mescroll) => {
	lastId.value = 0;
	downCallback();
};

const addRandomData = () => {
	// for (let i = 0; i < 10; i++) {
	// 	let index = random(0, flow.list.length - 1);
	// 	// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
	// 	let item = JSON.parse(JSON.stringify(flow.list[index]))
	// 	item.id = guid();
	// 	flow.flowList.push(item);
	// }
	for (let i = 0; i < 10; i++) {
		// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
		if (flow.list[i] != undefined) {
			let item = JSON.parse(JSON.stringify(flow.list[i]));
			console.log(item);
			flow.flowList.push(item);
		}
	}
};

/**
 * 展示积分兑换弹框
 */
const showModel = (item) => {
	currentGood.value = item;
	points_exchangePopup.show = true;
	points_exchangePopup.formData = {};
};

const validate = () => {
	if (!points_exchangePopup.formData.name) {
		uni.showToast({
			icon: 'none',
			title: '请输入姓名'
		});
		return false;
	} else if (!points_exchangePopup.formData.phoneNumber) {
		uni.showToast({
			icon: 'none',
			title: '请输入手机号'
		});
		return false;
	} else if (points_exchangePopup.formData.phoneNumber.length != 11) {
		uni.showToast({
			icon: 'none',
			title: '请输入正确的手机号'
		});
		return;
	} else if (!points_exchangePopup.formData.region) {
		uni.showToast({
			icon: 'none',
			title: '请选择区域'
		});
		return false;
	} else if (!points_exchangePopup.formData.detailedAddress) {
		uni.showToast({
			icon: 'none',
			title: '请输入详细地址'
		});
		return false;
	}
	return true;
};

// 兑换
const exchange = () => {
	if (currentGood.value.goodsType == 2) {
		if (!validate()) {
			return;
		}
	}
	SHOW.value = false;
	const obj = Object.assign({}, points_exchangePopup.formData, {
		exchangedItemsId: currentGood.value.exchangedItemsId
	});
	mineApi
		.exchangedGoods(obj)
		.then(async (res) => {
			if (res.code === 0) {
				setTimeout(() => {
					SHOW.value = true;
				}, 500);

				uni.showToast({
					title: '兑换成功'
				});
				points_exchangePopup.show = false;
				lastId.value = 0;

				downCallback();

				//重新获取用户信息
				await store.dispatch('setUserInfo');
				getUserInfo();
			}
		})
		.catch(() => {
			setTimeout(() => {
				SHOW.value = true;
			}, 500);
			points_exchangePopup.show = false;
			lastId.value = 0;
			downCallback();
		});
};
const changeAddress = (e) => {
	if (e.data) {
		points_exchangePopup.formData.region = e.data.join('');
	}
};

const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};

/**
 * 保存在相册
 */
const saveInAlbum = () => {
	uni.downloadFile({
		//下载
		url: 'http://192.168.1.240:28088/file/445900797f53f140ec40ad22d5d681b00831cdeeqrcode.png', //图片下载地址
		success: (res) => {
			if (res.statusCode === 200 || res.statusCode === 400) {
				// #ifdef H5
				/**
				 *保存文件到本地
				 *res.tempFilePath：下载好文件的临时路径，用来保存
				 *this.uploadedFile.name：下载的文件名称
				 */
				saveAs(res.tempFilePath, '客服二维码');
				contactModel.show = false;
				// #endif

				// #ifdef APP || MP-WEIXIN
				uni.saveImageToPhotosAlbum({
					//保存图片到系统相册。
					filePath: res.tempFilePath, //图片文件路径
					success: function () {
						uni.showToast({
							title: '图片保存成功',
							icon: 'none'
						});
						contactModel.show = false;
					},
					fail: function (e) {
						console.log(e);
						uni.showToast({
							title: '图片保存失败',
							icon: 'none'
						});
					}
				});
				// #endif
			}
		}
	});
};
</script>

<style lang="scss">
page {
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	overflow: hidden;
}

.member_content {
	padding: 0 32rpx;
}

.service_img {
	width: 40rpx;
	height: 40rpx;
	float: right;
}

.member_bgc {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;

	@media screen and (min-width: 992px) {
		width: 828rpx;
		margin: 0 auto;
		box-sizing: border-box;
		left: 50%;
		transform: translateX(-50%);
	}
}

.member_card {
	margin-top: 40rpx;
	width: 100%;
	border-radius: 24rpx;
	border: 3rpx solid #ffffff;
	box-sizing: border-box;
	position: relative;
	padding: 56rpx 0 32rpx 32rpx;

	.member_left_tip {
		width: 110rpx;
		height: 42rpx;
		border-radius: 24rpx 0rpx 16rpx 0rpx;
		position: absolute;
		left: -3rpx;
		top: -3rpx;
		text-align: center;
		font-weight: 400;
		font-size: 20rpx;
		color: #ffffff;
		line-height: 42rpx;
		opacity: 0.5;
	}

	.member_level_img {
		width: 164rpx;
		height: 164rpx;
		position: absolute;
		top: -24rpx;
		right: -20rpx;
	}

	.member_title {
		font-weight: 600;
		font-size: 48rpx;
		color: #5c7099;
		line-height: 62rpx;
	}

	.member_coin {
		display: flex;
		align-items: center;
		margin-top: 32rpx;

		.member_coinPic {
			width: 32rpx;
			height: 32rpx;
			margin-right: 4rpx;
		}

		.member_coin_text {
			font-weight: 500;
			font-size: 26rpx;
			color: #7d5227;
		}
	}

	.member_developValue {
		display: flex;
		align-items: center;
		font-weight: 500;
		font-size: 22rpx;
		line-height: 30rpx;
		margin-top: 42rpx;
	}
}

.exchange_title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 40rpx;
	margin-bottom: 24rpx;

	image {
		&:nth-child(1) {
			width: 94rpx;
			height: 24rpx;
		}

		&:nth-child(3) {
			width: 94rpx;
			height: 24rpx;
		}

		&:nth-child(2) {
			width: 430rpx;
			height: 52rpx;
		}
	}
}

.goodItem {
	margin-right: 26rpx;
	margin-bottom: 24rpx;
	border-radius: 24rpx;
	background: #ffffff;
	overflow: hidden;

	.goodInfo {
		padding: 12rpx 16rpx 14rpx 16rpx;
		width: 100%;
		box-sizing: border-box;

		.goodInfo_title {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
			-webkit-line-clamp: 2;
		}

		.goodInfo_coin {
			margin-top: 10rpx;
			display: flex;
			align-items: center;

			text {
				&:nth-child(1) {
					font-weight: 500;
					font-size: 32rpx;
					color: #ff4c5a;
					line-height: 44rpx;
					margin-right: 4rpx;
				}

				&:nth-child(2) {
					font-weight: 500;
					font-size: 24rpx;
					color: #ff4c5a;
					line-height: 34rpx;
					margin-right: 8rpx;
				}

				&:nth-child(3) {
					font-weight: 400;
					font-size: 20rpx;
					color: #666666;
					line-height: 23rpx;
					text-align: justified;
					font-style: normal;
					text-decoration-line: line-through;
				}
			}
		}

		.goodInfo_buy {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 10rpx;

			.goodInfo_buy_left {
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
				line-height: 30rpx;
			}

			.goodInfo_buy_btn {
				width: 148rpx;
				height: 58rpx;
				box-sizing: border-box;
				background: #f3e0bb;
				border-radius: 29rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #0e0e0e;
				line-height: 58rpx;
				text-align: center;
			}

			.goodInfo_buy_btn_inActive {
				pointer-events: none;
				background-color: #ececec;
			}
		}
	}
}

.points_exchange_modal_box {
	::v-deep .u-modal__content {
		padding: 0 !important;
	}

	::v-deep .u-line {
		display: none !important;
	}
}
/* #ifdef MP-WEIXIN */
::v-deep .u-modal__content {
	padding: 0 !important;
}

::v-deep .u-line {
	display: none !important;
}
/* #endif */

.points_exchange_modal {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 622rpx;
	background: #ffffff;
	border-radius: 16rpx;
	padding: 72rpx 24rpx 32rpx 24rpx;

	.points_exchange_close {
		position: absolute;
		right: 16rpx;
		top: 16rpx;
	}

	.points_exchange_good {
		display: flex;
		align-items: center;
		width: 100%;
		height: 196rpx;
		background: #f5f5f5;
		border-radius: 16rpx;
		overflow: hidden;

		image {
			width: 196rpx;
			height: 196rpx;
			margin-right: 24rpx;
			flex-shrink: 0;
		}

		.points_exchange_good_text {
			margin: 36rpx 16rpx 36rpx 0;

			.good_name {
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
				line-height: 36rpx;
				-webkit-line-clamp: 2;
			}

			.good_coin {
				font-weight: 500;
				font-size: 32rpx;
				color: #ff4c5a;
				line-height: 44rpx;
				margin-top: 8rpx;
			}
		}
	}

	::v-deep .u-form {
		width: 100%;
		padding-left: 10rpx;
		box-sizing: border-box;
	}

	::v-deep .input-placeholder {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999 !important;
		line-height: 33rpx;
		text-align: right;
	}

	::v-deep .uni-input-input {
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 33rpx;
		text-align: right;
	}

	::v-deep .u-form-item__body__right__content__slot {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
	}

	::v-deep .u-form-item__body {
		padding: 0 !important;
		margin-bottom: 32rpx !important;
	}

	.placeHolder {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 33rpx;
		text-align: right;
	}

	.value {
		color: #333333;
	}

	.arrow_right {
		width: 40rpx;
		height: 40rpx;
	}

	.exchange_btn {
		margin-top: 48rpx;
		width: 100%;
	}

	.exchange_attention {
		margin-top: 28rpx;
		display: flex;
		align-items: flex-start;
		justify-content: center;

		image {
			width: 24rpx;
			height: 24rpx;
			flex-shrink: 0;
			margin-right: 4rpx;
			margin-top: 5rpx;
		}

		.exchange_attention_text {
			font-weight: 400;
			font-size: 22rpx;
			color: #666666;
			line-height: 33rpx;
		}
	}
}
</style>
